<html>
	<head>
		<title>Sword. Magic. KungFu.</title>
		<style>
			body{
				background-color: #476C6C;
			}
			#splash, #chooseplayer{
				width: 400px;
				padding-left: auto;
				padding-right: auto;
				text-align: center;
			}
			/**
			#chooseplayer img{
				margin: 10px 10px 30px 10px;
			}**/
			#logo{
				margin-bottom: 20px;
			}
			#panels{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 400px;
				height: 400px;
			}
			.menubtn a, .menubtn a:hover, #chooseplayer a, #chooseplayer a:hover{
				color: white;
				text-decoration: none;
				font-weight: bold;
				font-size: 1.1em;
			}
			.menubtn a:hover, #chooseplayer a:hover{
				font-size: 1.5em;
				padding: 5px;
				margin: 0px;
			}
			#hidden, .panel{
				display: none;
			}
			.playerimg{
				height: 128px;
				width: 128px;
			}
			#playerleft, #playerright{
				float: left;
				width: 190px;
				
			}
			#leftplayerstats, #rightplayerstats {
				float: left;
				width: 170px;
				*width: 200px;
				padding-left: 30px;
				background-color: black;
				color: white;
				margin-top: 20px;
				padding-top: 10px;
				padding-bottom: 10px;
				xborder: 1px solid red;
			}
			
			#playerleft #playerleftimg, #playerright #playerrightimg{
				margin-left: 30px;
				margin-top: 15px;
				
			}
			
			#cptitle{
				width: 400px;
				background-color: black;
				color: white;
				font-size: 1.3em;
				padding-top: 3px;
			}
			
			#gamestatus{
        		height: 100px;
        		width: 400px;
        		background-color: gray;
        		clear: both;
        		padding-top: 10px;
      		}
      		#gsdata{
        		color: white;
        		font-size: 1.1em;
        		text-align: center;
      		}
      		
      		#charpreviewimg,#playerleftimg,#playerrightimg{
				width:128px;
				height:128px;
				overflow: hidden;
				position: relative;
				margin: 0px;
				padding: 0px;
				margin-left: auto;
				margin-right: auto;
			}
			#charpreviewimgsrc,#playerleftimgsrc,#playerrightimgsrc{
      			position: absolute;
      			top: 0px;
      			left: -128px;
    		}
		</style>
		<script type="text/javascript" src='../libs/yahoo.js'></script>
		<script type="text/javascript" src='../libs/animation.js'></script>
		<script type="text/javascript" src='../libs/dom.js'></script>
		<script type="text/javascript" src='../libs/event.js'></script>
		<script type="text/javascript" src='../libs/json.js'></script>
		<script>
			YAHOO.namespace('alw.smkf');
			YAHOO.namespace('alw.localplayer');
			YAHOO.namespace('alw.remoteplayer');
			var ydom = YAHOO.util.Dom;
			var yevt = YAHOO.util.Event;
			var yevt =YAHOO.util.Event;
			var yhost = window.external;
			
			
			var playerObj = function(){};
			playerObj.prototype={
				score: 0,
				points: {sword: 0, magic: 0, kungfu: 0},
				wildcards:0,
				health: 100,
				cards: 0,
				currAttack: 'sword',
				hasSetAttack: false,
				status: 'not ready',
				otherPlayerDamage:null,
				charIdx: 0
			}
			YAHOO.alw.localplayer =new playerObj();
			YAHOO.alw.remoteplayer=new playerObj();
			
			YAHOO.alw.smkf = {
				currIdx: 0,
				msgs: {
          			waiting:"Waiting for other player...",
          			attack: "Attack! [<a href='javascript:YAHOO.alw.smkf.atkSword()'>Sword</a>] [<a href='javascript:YAHOO.alw.smkf.atkMagic()'>Magic</a>] [<a href='javascript:YAHOO.alw.smkf.atkKungFu()'>KungFu</a>]",
          			attackCard: "[<a href=''>Play WildCard</a>]",
          			attacking: "Attacking!"
          		},
          		imgPath: "http://awooldri.corp.yahoo.com/tests/tests/SwordMagicKungFu/src/img/",
        		isInviter: false,
				init: function(){
					//this.setupImages();
					YAHOO.alw.localplayer.status='not ready';
					YAHOO.alw.remoteplayer.status='not ready';
          			if(yhost){
				  		yhost.LocalReady ();
              			if(yhost.Inviter){
				  			this.isInviter = true;
				  		}else{
				  			this.isInviter = false;
				  		}
					}
          			this.showPanel(null,'splash');
          			this.displayGameStatus('waiting');
				},

				showPanel: function(){
					//console.log(arguments)
					ydom.setStyle(ydom.getElementsByClassName('panel'),'display','none');
					ydom.setStyle(arguments[1], 'display','block');
				},
				
				changePlayer:function(){
          			//var charsLen = YAHOO.alw.smkf.chars.length;
          			var currIdx = YAHOO.alw.smkf.currIdx;
				  	switch(arguments[1]){
						case "fwd": 
							currIdx+=256;
							if(currIdx>(39*256)){
								currIdx = 0;
							}
						  	break;
					 	case "back": 
							currIdx-=256
							if(currIdx <0){
								currIdx = 39*256
							}
						  	break;
				  	}
				  	YAHOO.alw.smkf.currIdx = currIdx;
				  	YAHOO.alw.localplayer.charIdx = YAHOO.alw.smkf.currIdx;
				  	//var imgString = YAHOO.alw.smkf.imgPath+YAHOO.alw.localplayer.charName+"_left.gif";
				  	//alert(currIdx)
				  	ydom.get('charpreviewimgsrc').style.left=-(currIdx + 128)+'px';
				  	ydom.get('playerleftimgsrc').style.left=-(currIdx +128) +'px';
        		},
				choosePlayer: function(){
					//do some stuff to choose the player - modifies the localplayer object
					YAHOO.alw.localplayer.status="ready to play";
					this.sendGameStatus();
				
				},
				sendGameStatus: function(){
				  //alert('in send game status')
					if(yhost){
						yhost.SendPluginMessage(YAHOO.alw.localplayer.toJSONString());
					}
					//go to next step
					this.progressGame();			
				},
				onMessageReceived: function(msg){
					//got status from other player - update our knowledge of that player
					//uses JSON lib to parse instead of nasty old eval
					//alert('onmsgrecieved: '+msg)
					var tempObj = msg.parseJSON();
					for(i in YAHOO.alw.remoteplayer){
						YAHOO.alw.remoteplayer[i] = tempObj[i];
				    	if(i == 'charIdx'){
				      		//var targetRightImg = ydom.get('prplayerimg').src;
				      		//var newSrc = YAHOO.alw.smkf.imgPath+YAHOO.alw.remoteplayer[i]+'.gif';      
              				//if(targetRightImg != newSrc){
                			//	ydom.get('prplayerimg').src = newSrc;
              				//}
              				ydom.get('playerrightimgsrc').style.left=-YAHOO.alw.remoteplayer[i]+'px';
            			}
					}
					//go to next step
					YAHOO.alw.smkf.progressGame();
				},
				progressGame: function(){
					var local = YAHOO.alw.localplayer;
				  	var remote = YAHOO.alw.remoteplayer;
          			if(local.status=='ready to play'){
            			YAHOO.alw.smkf.showPanel(null, 'arena');
            		}
				  	//alert('progress game  remote status'+ YAHOO.alw.remoteplayer.status)
					if(local.status =='ready to play' && remote.status=='ready to play'){
					 //alert('remote ready to play')
            			this.displayGameStatus('attack');
          			}
          if(local.status == 'attackset' && remote.status=='attackset'){
            //alert('progressgame attackset on both')
            if(this.isInviter){
              //calculate damage here
              //alert('is Inviter')
              this.resolveDamage();
            }
          }
          if(local.status=='attackset' && remote.status=='ready to play'){
            this.displayGameStatus('waiting');
          }
          if(remote.status=='take the damage'&& local.status!='ready to play'){
            if(!this.isInviter){
              //alert('damage phase for non inviter')
              //other player calculated damage so update your local player obj
              for(i in YAHOO.alw.remoteplayer.otherPlayerDamage){
                //alert('going through setting scores :'+ i)
						    YAHOO.alw.localplayer[i] = YAHOO.alw.remoteplayer.otherPlayerDamage[i];
              }
              local.status='ready to play'
              remote.status='ready to play'
              this.displayGameStatus('attack');
            }
             
          }
          if(local.status=='take the damage'){
            local.status='ready to play'
            remote.status='ready to play'
            this.displayGameStatus('attack');
          }
          
          
          YAHOO.alw.smkf.displayScore();
				},
				displayScore: function(){
          //alert('display score');
          var local = YAHOO.alw.localplayer
          var remote = YAHOO.alw.remoteplayer
          var smkf = YAHOO.alw.smkf
          
          smkf.setScoreHTML('lpslife',local.health)
          smkf.setScoreHTML('lpsscore',local.score)
          smkf.setScoreHTML('rpslife',remote.health)
          smkf.setScoreHTML('rpsscore',remote.score)  
          if(local.life<=0){
            alert('you lose!')
          } 
          if(remote.life<=0){
            alert('you win!')
          }      
        },
        setScoreHTML: function(id,value){
          //alert('in set score html')
          ydom.get(id).getElementsByTagName('span')[0].innerHTML=value;
        },
				onRemoteQuit: function(){
				//display message that other player has quit
				},
				displayGameStatus:function(type){
				  //alert('display game status : '+ type)
          ydom.get('gsdata').innerHTML=this.msgs[type];
        },
        atkSword: function(){
          //alert('attack with sword');
          YAHOO.alw.smkf.atkWithType('sword');
        },
        atkMagic: function(){
          //alert('attack with magic');
          YAHOO.alw.smkf.atkWithType('magic');
        },
        atkKungFu: function(){
          //alert('attack with kungfu');
          YAHOO.alw.smkf.atkWithType('kungfu');
        },
        atkWithType:function(type){
          //alert('in atkWith : ' + type)
          YAHOO.alw.localplayer.currAttack = type;
          YAHOO.alw.localplayer.status = 'attackset';
          this.displayGameStatus('attacking');
          YAHOO.alw.smkf.sendGameStatus();
        },
        resolveDamage: function(){
          //alert('in resolveDamage')
				var playerDamage = 0;
				var opponentDamage = 0;
				//alert("localAttack "+YAHOO.alw.localplayer.currAttack + "remoteattack" + YAHOO.alw.remoteplayer.currAttack)
				
				switch(YAHOO.alw.localplayer.currAttack){
					case 'sword':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
							// alert('sword vs sword')
								//tie - jarring so 1pt damage
								playerDamage = 1;
								opponentDamage = 1;
								break;
							case 'magic':
							//alert('sword vs magic')
								//sword beats magic
								playerDamage = 0;
								opponentDamage = 5;
								break;
							case 'kungfu':
							// alert('sword vs kungfu')
								//sword loses to kungfu
								playerDamage = 5;
								opponentDamage = 0;
								break;
						}
						break;
					case 'magic':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
							 // alert('magic vs sword')
								//magic loses to sword
								playerDamage = 5;
								opponentDamage = 0;
								break;
							case 'magic':
							  //alert('magic vs magic')
								//tie
								playerDamage = 1;
								opponentDamage = 1;
								break;
							case 'kungfu':
							//alert("magic vs kungfu")
								//magic beats kungfu
								playerDamage = 5;
								opponentDamage = 0;
								break;
						}
						break;
					case 'kungfu':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
							  //alert('kungfu vs sword')
								//kungfu beats sword
								playerDamage = 0;
								opponentDamage = 5;
								break;
							case 'magic':
							  //alert('kungfu vs magic')
								//kungfu loses to magic
								playerDamage = 5;
								opponentDamage = 0;
								break;
							case 'kungfu':
							  //alert('kungfu vs kungfu')
								//tie
								playerDamage = 1;
								opponentDamage = 1;
								break;
						}
						break;
				}
        //alert('local'+playerDamage+' remote'+opponentDamage)
				YAHOO.alw.localplayer.health-=playerDamage;
				YAHOO.alw.localplayer.score += opponentDamage*2;
				YAHOO.alw.remoteplayer.health-=opponentDamage;
				YAHOO.alw.remoteplayer.score += playerDamage*2;
				YAHOO.alw.localplayer.status = 'take the damage';
				YAHOO.alw.remoteplayer.status = 'damage phase';
				YAHOO.alw.localplayer.otherPlayerDamage = YAHOO.alw.remoteplayer
				YAHOO.alw.smkf.sendGameStatus();
			}
        
				
			}
			
			
			/**
				GetExternal().SetEventHandler('RemoteReady', _OnRemoteAppLoaded);
        		GetExternal().SetEventHandler('PluginMessage', _OnDataReceived); 
				GetExternal().SetEventHandler('RemoteUnloaded', _OnRemoteAppClosed);
			**/
			
			yevt.addListener(window,'load',YAHOO.alw.smkf.init,YAHOO.alw.smkf, true);
			yevt.addListener('btnstart','click',YAHOO.alw.smkf.showPanel, 'chooseplayer');
			yevt.addListener('btnhowto','click',YAHOO.alw.smkf.showPanel, 'howtoplay');
			yevt.addListener('btncredits','click',YAHOO.alw.smkf.showPanel, 'credits');
			yevt.addListener('cpselect', 'click', YAHOO.alw.smkf.choosePlayer, YAHOO.alw.smkf, true);
			
      yevt.addListener('cpprev', 'click', YAHOO.alw.smkf.changePlayer, 'back');
			yevt.addListener('cpnext', 'click', YAHOO.alw.smkf.changePlayer, 'fwd');
      
      if(yhost){
		  		yhost.SetEventHandler("PluginMessage", YAHOO.alw.smkf.onMessageReceived);
		  		yhost.SetEventHandler("RemoteUnloaded",YAHOO.alw.smkf.onRemoteQuit);
			}
			
		</script>
	</head>
	<body>
		<div id='panels'>
			<div id='splash' class="panel">
				<img id='logo' src='../img/logo2.png'/>
				<div class='menubtn'><a id='btnstart' href="javascript:void(0)">START</a></div>
				<div class='menubtn'><a id='btnhowto' href="javascript:void(0)">HOW TO PLAY</a></div>
				<div class='menubtn'><a id='btncredits' href="javascript:void(0)">CREDITS</a></div>
			</div>
			<div id='chooseplayer' class="panel">
				<div id='cptitle'>
					<span>CHOOSE A CHARACTER</span>
				</div>
				<div id="charpreviewimg">
  					<img id='charpreviewimgsrc' src="../img/characters_trans.gif">
				</div>
				<div id="cpnav">
					<a href="javascript:void(0)" id='cpprev'>PREV</a>
					<a href="javascript:void(0)" id='cpselect'>SELECT</a>
					<a href="javascript:void(0)" id='cpnext'>NEXT</a>
				</div>
			</div>
			<div id='arena' class="panel" >
				<div id='playerleft'>
					<!--  
					<img id='plplayerimg' src="../img/antaeus_left.gif" class="playerimg"/>
					-->
					<div id="playerleftimg">
  						<img id='playerleftimgsrc' src="../img/characters_trans.gif">
					</div>
				</div>
				<div id='playerright'>
					<!--  
					<img id='prplayerimg' src="../img/cerebov.gif" class="playerimg"/>
					-->
					<div id="playerrightimg">
  						<img id='playerrightimgsrc' src="../img/characters_trans.gif">
					</div>
				</div>
				<br clear="both"/>
				<div id='playerstats'>
					<div id='leftplayerstats'>
						<div id='lpslife'>LIFE:<span>100</span></div>
						<div id='lpsscore'>SCORE:<span>0</span></div>
						<!--
						<div id='lpssword'>SWORD:<span>0</span></div>
						<div id='lpsmagic'>MAGIC:<span>0</span></div>
						<div id='lpskungfu'>KUNGFU:<span>0</span></div>
						<div id='lpswildcard'>WILDCARDS:<span>0</span></div>
						-->
					</div>
					<div id='rightplayerstats'>
						<div id='rpslife'>LIFE:<span>100</span></div>
						<div id='rpsscore'>SCORE:<span>0</span></div>
						<!--
            <div id='rpssword'>SWORD:<span>0</span></div>
						<div id='rpsmagic'>MAGIC:<span>0</span></div>
						<div id='rpskungfu'>KUNGFU:<span>0</span></div>
						<div id='rpswildcard'>WILDCARDS:<span>0</span></div>	
            -->			
					</div>
				</div>
				
				<div id='gamestatus'>
				  <div id='gsdata'>Loading...</div>
        </div>
			</div>
			<div id='credits' class="panel">
				credits
			</div>
			<div id='howtoplay' class="panel">
				howtoplay
			</div>
			<div id='remoteclosed' class="panel">
				the other player has quit.
			</div>
		</div>
		<div id='overlays'>
			
		</div>
		<div id='hidden'>
		
		</div>
		<!-- debug -->

	 <a href="javascript:window.location.reload()" style='position:absolute; top:0px; left: 0px; z-index: 1000'>[reload]</a>
	</body>
</html>
